{% extends 'base.html' %}

{% block css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='editormd/css/editormd.css') }}">
{% endblock %}

{% block js %}
    <script type="text/javascript" src="{{ url_for('static', filename='editormd/editormd.min.js') }}"></script>
    <script>
        var mk_editor;
        $(function () {
            mk_editor = editormd("edit-editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                path: "{{ url_for('static',filename='editormd/lib/') }}",
                saveHTMLToTextarea: true
            });


            <!-- 发表博客 -->
            $('.publish-blog-btn').click(function () {
                var blog_title = $('#blog-title').val();
                var blog_content = mk_editor.getHTML();
                var blog_md_content = mk_editor.getMarkdown();
                var blog_description = $('#blog-description').val();
                var blog_category_id = $('#blog-category').val();
                var blog_tag_id_list = $('#blog-tag').val();
                var blog_suffix = $('#blog-suffix').val();
                if (blog_title && blog_content && blog_md_content && blog_description && blog_category_id && blog_tag_id_list && blog_suffix) {
                    var data = {
                        'blog_title': blog_title,
                        'blog_content': blog_content,
                        'blog_md_content': blog_md_content,
                        'blog_description': blog_description,
                        'blog_category_id': blog_category_id,
                        'blog_tag_id_list': blog_tag_id_list,
                        'blog_status': '{{ PUBLISHED_BLOG}}',
                        'blog_suffix': blog_suffix
                    };
                    var url = {% if current_blog %}'{{ url_for('blog.blog_edit', blog_id=current_blog.id) }}'{% else %}'{{ url_for('blog.blog_create') }}'{% endif %};
                    $('.preloader').fadeIn('slow');
                    $.post(url, data, function (data, status) {
                        window.location.href = '{{ url_for('blog.blog_create') }}';
                    });
                } else {
                    console.log('error');
                    return false;
                }
            });

            <!-- 保存草稿 -->
            $('.save-blog-btn').click(function () {
                var blog_title = $('#blog-title').val();
                var blog_content = mk_editor.getHTML();
                var blog_md_content = mk_editor.getMarkdown();
                var blog_description = $('#blog-description').val();
                var blog_category_id = $('#blog-category').val();
                var blog_tag_id_list = $('#blog-tag').val();
                var blog_suffix = $('#blog-suffix').val();
                if (blog_title && blog_content && blog_md_content && blog_description && blog_category_id && blog_tag_id_list && blog_suffix) {
                    var data = {
                        'blog_title': blog_title,
                        'blog_content': blog_content,
                        'blog_md_content': blog_md_content,
                        'blog_description': blog_description,
                        'blog_category_id': blog_category_id,
                        'blog_tag_id_list': blog_tag_id_list,
                        'blog_status': '{{ DRAFT_BLOG }}',
                        'blog_suffix': blog_suffix
                    };
                    var url = {% if current_blog %}'{{ url_for('blog.blog_edit', blog_id=current_blog.id) }}'{% else %}'{{ url_for('blog.blog_create') }}'{% endif %};
                    $('.preloader').fadeIn('slow');
                    $.post(url, data, function (data, status) {
                        window.location.href = '{{ url_for('blog.blog_create') }}';
                    });
                } else {
                    console.log('error');
                    return false;
                }
            });

        });
    </script>
{% endblock %}

{% block content %}
    <!-- Title Begin -->
    <div class="blog-title">
        <div>
            <h3 class="pull-left">文章标题</h3>
            <a href="#" title="发表博客" class="publish-blog" data-toggle="modal"  data-target="#myModal">
                <h3 class="pull-right">发表博客</h3>
            </a>
        </div>
        <input type="text" id="blog-title" class="form-control" placeholder="Blog Title"  value="{% if current_blog %}{{ current_blog.title }}{% endif %}">
    </div>
    <!-- Title End -->

    <!-- mk编辑区 -->
    <div class="blog-content">
        <h3>正文内容</h3>
        <div id="edit-editormd">
            <!-- markdown输入文本 -->
            <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc">{% if current_blog %}{{ current_blog.md_content }}{% endif %}</textarea>
            <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
            <textarea class="editormd-html-textarea"></textarea>
        </div>
    </div>

    <!-- 填写文章简述和选择标签 -->
    <div class="modal fade blog-introduction-edit" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">发表文章</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <h4>文章地址后缀</h4>
                            <input type="text" id="blog-suffix" class="form-control" placeholder="Blog URL Suffix"  value="{% if current_blog %}{{ current_blog.url_suffix }}{% endif %}">
                        </div>
                        <div class="form-group">
                            <h4>文章分类</h4>
                            <select id="blog-category" class="selectpicker" data-live-search="true" data-width="30%" title="给文章添加分类.">
                                {% for category in category_list %}
                                    <option value="{{ category.id }}" {% if current_blog and current_blog.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <h4>可多选的标签列表</h4>
                            <select id="blog-tag" class="selectpicker" data-live-search="true" data-width="50%"
                                    data-max-options="3" title="选择你喜欢的标签." multiple>
                                {% for tag in tag_list %}
                                    <option value="{{ tag.id }}" {% if current_blog and tag.id in editing_blog_tag_list %}selected{% endif %}>{{ tag.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <h4>文章概要</h4>
                            <textarea id="blog-description" class="form-control" rows="10" placeholder="介绍一下你的文章吧.">{% if current_blog %}{{ current_blog.description }}{% endif %}</textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">我再想想</button>
                    <button type="button" class="btn my-btn-primary publish-blog-btn">保存并发布</button>
                    <button type="button" class="btn my-btn-primary save-blog-btn">保存为草稿</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}